<template>
  <div>
    <div class="img_list">
      <a-upload
        :file-list="fileList"
        list-type="picture-card"
        class="uploader"
        accept="image/*"
        :disabled="disabled"
        :max-count="length"
        :showUploadList="showUploadList"
        :custom-request="handleUploadFile"
        :before-upload="beforeAvatarUpload"
        :is-image-url="() => true"
        @preview="handlePreview"
        @remove="handleRemove"
        :multiple="length>1"
      >
        <div v-if="fileList.length < length">
          <plus-outlined class="icon" />
          <div v-if="showTips" class="tips">上传图片</div>
        </div>
      </a-upload>
    </div>
    <div v-if="showTips" class="text">
      图片上传 image/gif, image/jpeg ,image/png。10M以内
    </div>
    <a-modal :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { message, Form } from 'ant-design-vue'
import { upload } from '@/api/common'

const formItemContext = Form.useInjectFormItemContext();

const props = defineProps({
  length: {
    type: Number,
    default: 1
  },
  fileList: {
    type: Array,
    default: () => []
  },
  showTips: {
    type: Boolean,
    default: true
  },
  tips: {
    type: String,
    default: ''
  },
  size: {
    type: Number,
    default: 1
  },
  disabled: {
    type: Boolean,
    default: false
  },
  showUploadList: {
    type: Object,
    default: () => {
      return {
        showPreviewIcon: true,
        showRemoveIcon: true
      }
    }
  }
})
const emit = defineEmits(['update:fileList'])
const previewVisible = ref(false)
const previewImage = ref('')
const previewTitle = ref('')
const beforeAvatarUpload = (file) => {
  const isJPG =
    file.type === 'image/jpeg' ||
    file.type === 'image/png' ||
    file.type === 'image/avif' ||
    file.type === 'image/webp'
  const isLt3M = file.size / 1024 <= 10 * 1024

  if (!isJPG) {
    message.error('上传头像图片只能是 JPG、PNG、 avif、webp格式!')
  }
  if (!isLt3M) {
    message.error('上传头像图片大小不能超过 10M!')
  }
  return isJPG && isLt3M
}
const handlePreview = (file) => {
  previewImage.value = file.url
  previewVisible.value = true
  previewTitle.value = file.name
}
const handleCancel = () => {
  previewVisible.value = false
  previewTitle.value = ''
}
const handleUploadFile = ({ file }) => {
  const formData = new FormData()
  formData.append('file', file);
  upload(formData).then(res => {
    const {data} = res
    const files = [...props.fileList]
    const index = files.findIndex((i) => i.uid === file.uid)
    if (index >= 0) {
      files.splice(index, 1)
    }
    files.push({ uid: data.imagePath, name: file.name, status: 'done', url: data.imagePath })
    emit('update:fileList', files)
    formItemContext.onFieldChange()
  })
}
const handleRemove = (file) => {
  const distIndex = props.fileList.findIndex((i) => i.uid === file.uid)
  const fileList = [...props.fileList]
  fileList.splice(distIndex, 1)
  emit('update:fileList', fileList)
  formItemContext.onFieldChange()
  return false
}
</script>
<style lang="less" scoped>
.img_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .ant-upload {
    margin-right: 12px;
    margin-bottom: 12px;
  }
}
.uploader {
  .icon {
    color: rgba(0, 0, 0, 0.65);
  }
  .tips {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    line-height: 22px;
    margin-top: 6px;
  }
  :deep(.ant-upload-picture-card-wrapper) {
    width: auto;
  }
}
.text {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 22px;
  margin-top: -8px;
}
</style>
